<template>
  <a-card :bordered="false">

    <a-tabs defaultActiveKey="3" @change="callback">
      <a-tab-pane :tab=" $t('statisticalReport.list') " key="3">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">

          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label=" $t('light.lightCode') ">
                  <j-input :placeholder=" $t('base.inputVagueQuery') " v-model="queryParam.ligCode"></j-input>
                </a-form-item>
              </a-col>


              <a-col :md="4" :sm="8">
                <a-form-item :label=" $t('light.gateWay') ">
                  <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.gataWayCode"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="8">
                <a-form-item :label=" $t('base.createTime')">
                  <j-date :placeholder="$t('base.pleaseChoose')"  v-model="queryParam.dateTime" style="width: 100%"/>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
            </span>
              </a-col>

            </a-row>
          </a-form>

        </div>

        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <img :src="getAvatarView(record.currentWorkStatus)"/>
              </div>
            </template>

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

          </a-table>
        </div>

      </a-tab-pane>

      <a-tab-pane :tab=" $t('statisticalReport.averageElectricityConsumption') " key="1">
        <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="5" :sm="8">
            <a-form-item :label="$t('light.lightCode')">
              <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.ligCode1"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item :label=" $t('light.gateWay') ">
              <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.gataWayCode1"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
              <a-form-item :label=" $t('statisticalReport.yearMonth')">

                <a-month-picker
                  :placeholder="$t('base.pleaseChoose')"
                  v-model="monthModelValue"
                  @change="monthChange"
                />

              </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
              <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch"> {{$t('base.query')}} </a-button>
              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset"> {{$t('base.reset')}} </a-button>
          </a-col>
        </a-row>
        </a-form>

          <line-chart-multid class="statistic" :title=" $t('statisticalReport.averageElectricityConsumptionKWH') " :dataSource="countSource" :fields="countFields" :aliases="countAliases" :height="400"/>

      </a-tab-pane>

      <a-tab-pane :tab=" $t('statisticalReport.totalElectricity') " key="2">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="5" :sm="8">
              <a-form-item :label="$t('light.lightCode')">
                <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.ligCode2"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item :label="$t('light.gateWay')">
                <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.gataWayCode2"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item :label="$t('statisticalReport.yearMonth') ">

                <a-month-picker
                  :placeholder="$t('base.pleaseChoose')"
                  v-model="monthModelValue2"
                  @change="monthChange2"
                />

              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch2"> {{$t('base.query')}} </a-button>
              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset2"> {{$t('base.reset')}} </a-button>
            </a-col>
          </a-row>
        </a-form>

        <line-chart-multid class="statistic" :title=" $t('statisticalReport.totalElectricityKWH') " :dataSource="countSource2" :fields="countFields2" :aliases="countAliases2" :height="400"/>

      </a-tab-pane>

    </a-tabs>


  </a-card>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import { httpAction } from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import moment from 'moment'//导入文件



  export default {
    name: 'GlrLightDataDay',
    mixins:[JeecgListMixin],
    components: {
      ACol,
      Bar,
      Pie,
      JInput,
      JDate,
      LineChartMultid,
    },
    data() {
      return {
        description: this.$t('statisticalReport.dailyElectricityStatistics') ,
        // 查询条件
        queryParam: {},
        monthModelValue:moment(),
        monthModelValue2:moment(),
        monthValue: [],
        monthValue2: [],
        bFirst:true,  //第一次打开图表页面就查询一下
        bFirst2:true,  //第一次打开图表页面就查询一下
        // 数据集
        countSource: [],
        countFields: [],
        countAliases: [],
        countSource2: [],
        countFields2: [],
        countAliases2: [],
        // 表头
        columns: [
          {
            title:this.$t('base.createTime') ,
            align:"center",
            dataIndex: 'createTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title: this.$t('light.gateWay'),
            align:"center",
            dataIndex: 'gataWayCode'
          },
          {
            title:  this.$t('light.lightCode') ,
            align: "center",
            dataIndex: 'ligCode'
          },
          {
            title: this.$t('statisticalReport.dayElectricityKWH') ,
            align:"center",
            dataIndex: 'dayElectricity'
          },
          {
            title: this.$t('statisticalReport.dayEconomyElectricityKWH') ,
            align:"center",
            dataIndex: 'dayEconomyElectricity'
          },
          {
            title: this.$t('statisticalReport.avgVol') ,
            align:"center",
            dataIndex: 'avgVol'
          },
          {
            title: this.$t('statisticalReport.avgCur') ,
            align:"center",
            dataIndex: 'avgCur'
          },
          {
            title: this.$t('statisticalReport.avgBrightness'),
            align:"center",
            dataIndex: 'avgBrightness'
          },
          {
            title: this.$t('statisticalReport.avgPower') ,
            align:"center",
            dataIndex: 'avgPower'
          },
          {
            title: this.$t('light.temperature')  ,
            align:"center",
            dataIndex: 'avgTemperature'
          }
        ],
        url: {
          list: "/glr/glrLightData/list",
          lightReportChart:"/glr/glrLightData/lightReportChart",
          lightReportChart2:"/glr/glrLightData/lightReportChart",
        },
      }
    },
    created() {
      this.monthValue=moment(new Date()).format("YYYY-MM")
      this.monthValue2=moment(new Date()).format("YYYY-MM")
      //this.loadDate(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',yearMonth:this.monthValue});
    },
    methods: {
      loadDate(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields=['day_Electricity_List','economy_Electricity_List'];
          this.countAliases=[{field:'day_Electricity_List',alias:this.$t('statisticalReport.averageElectricityConsumptionKWH') }, {field:'economy_Electricity_List',alias:this.$t('statisticalReport.averageSaveElectricityConsumptionKWH')}]
          let dateList=res.dateList;
          let day_Electricity_List=res.day_Electricity_List;
          let economy_Electricity_List=res.economy_Electricity_List;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
           let aa={ type: dateList[j], day_Electricity_List: day_Electricity_List[j], economy_Electricity_List: economy_Electricity_List[j] };
           bb.push(aa);
          }
          this.countSource=bb;
        })
      },
      loadDate2(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields2=['day_Electricity_List','economy_Electricity_List'];
          this.countAliases2=[{field:'day_Electricity_List',alias: this.$t('statisticalReport.totalElectricityKWH') }, {field:'economy_Electricity_List',alias:this.$t('statisticalReport.totalSaveElectricityKWH') }]
          let dateList=res.dateList;
          let day_Electricity_List=res.day_Electricity_List;
          let economy_Electricity_List=res.economy_Electricity_List;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
            let aa={ type: dateList[j], day_Electricity_List: day_Electricity_List[j], economy_Electricity_List: economy_Electricity_List[j] };
            bb.push(aa);
          }
          this.countSource2=bb;
        })
      },
      // 选择统计图类别
      callback(key) {
        if(key === "1"){
          if (this.bFirst){
            this.bFirst=false
            this.chartSearch();
          }
        }
        if(key === "2"){
          if (this.bFirst2){
            this.bFirst2=false
            this.chartSearch2();
          }
        }
      },
      // 按月份查询
      chartSearch(){
        let ligCode1=this.queryParam.ligCode1
        let gataWayCode1=this.queryParam.gataWayCode1
        var st1=this.monthValue.split("-");
        var year=st1[0];
        var month=st1[1];
        this.loadDate(this.url.lightReportChart,'year',{ligCode:ligCode1,gatawayCode:gataWayCode1,year:year,month:month,type:11});
      },
      chartSearch2(){
        let ligCode1=this.queryParam.ligCode2
        let gataWayCode1=this.queryParam.gataWayCode2
        var st1=this.monthValue2.split("-");
        var year=st1[0];
        var month=st1[1];
        this.loadDate2(this.url.lightReportChart2,'year',{ligCode:ligCode1,gatawayCode:gataWayCode1,year:year,month:month,type:12});
      },
      searchReset(){
        var that = this;
        that.queryParam.ligCode = "";
        that.queryParam.gataWayCode = "";
        that.queryParam.dateTime = "";
        that.loadData(this.ipagination.current);
      },
      chartSearchReset(){
        this.monthModelValue=moment();
        this.monthValue=moment(new Date()).format("YYYY-MM")
        this.queryParam.ligCode1 = "";
        this.queryParam.gataWayCode1 = "";
        var st1=this.monthValue.split("-");
        var year=st1[0];
        var month=st1[1];
        this.loadDate(this.url.lightReportChart,'year',{ligCode:'',gatawayCode:'',year:year,month:month,type:11});
      },
      chartSearchReset2(){
        this.monthModelValue2=moment();
        this.monthValue2=moment(new Date()).format("YYYY-MM")
        this.queryParam.ligCode2 = "";
        this.queryParam.gataWayCode2 = "";
        var st1=this.monthValue.split("-");
        var year=st1[0];
        var month=st1[1];
        this.loadDate2(this.url.lightReportChart2,'year',{ligCode:'',gatawayCode:'',year:year,month:month,type:12});
      },
      // 选择月份日期
      monthChange(value, mode) {
        this.monthValue = mode
      },
      monthChange2(value, mode) {
        this.monthValue2 = mode
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }
</style>